﻿
@{
    ViewBag.Title = "首页";
}
<link href="~/css/dropload.css" rel="stylesheet" />
<link href="~/css/swiper.min.css" rel="stylesheet" />
<link href="~/css/common.css" rel="stylesheet" />
<style>
    .swiper-container {
        position: fixed;
        width: 100%;
        height: 2rem;
        background-color: #eee;
        z-index: 99999;
        top: 3.2rem;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-xlbtn {
        position: absolute;
        margin-top: -2rem;
        z-index: 999999;
        width: 2rem;
        height: 2rem;
        background-color: #eee;
        right: 0;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.9;
    }

    .swiper-slide a {
        color: #212121;
    }

    .current {
        color: #ed4242;
    }

    .aui-slide-page-wrap {
        z-index: 2;
    }
</style>

<header class="aui-bar aui-bar-nav" id="aui-header">
    <div class="aui-title">首页</div>
    <a href="@Url.Action("Search")" class="aui-pull-right aui-btn aui-btn-outlined"> <span class="aui-iconfont aui-icon-search"></span> </a>
</header>

<!--导航Start-->
<div class="swiper-container">
    <div class="swiper-wrapper">

    </div>
    <div class="swiper-xlbtn">
        <img src="~/image/xiala000.png" style="margin: 0.7rem 0 0 0.5rem;" />
    </div>
</div>
<!--导航End-->
<!--BannerStart-->
<div class="content">
    <div id="aui-slide3">
        <div class="aui-slide-wrap">

        </div>
        <div class="aui-slide-page-wrap"><!--分页容器--></div>
    </div>
    <div class="lists">
        <ul class="aui-list aui-media-list">
            <!--文章列表-->
        </ul>
    </div>
</div>
<!--BannerEnd-->
<!--加载动画Start-->
<div id="loading">
    <div class="loading">
        <img src="~/image/loading.gif" />
    </div>
</div>
<!--加载动画End-->

<script type="text/javascript" src="~/Scripts/aui-slide.js"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.lazyload.js")"></script>
<script type="text/javascript" src="~/Scripts/dropload.min.js"></script>
<script src="~/Scripts/swiper.min.js"></script>
<script src="~/Scripts/commonJS.js"></script>

<script type="text/javascript">

    $(function () {

        //延迟加载（懒加载）图片
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });

        //获取菜单ID
        var ID = (getUrlParam('ID') == null) ? "" : getUrlParam('ID');

        //加载顶部菜单
        $.ajax({
            url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/Frame/GetMenu",
            contentType: "application/json",
            type: "POST",
            async: true,
            data: JSON.stringify({ ID: 'HomePage', IsChild: 'false' }),
            dataType: "json",
            success: function (data, status) {
                var dd = eval(data.result);
                var result = '';
                for (var i = 0; i < dd.length; i++) {
                    if (ID == "" && i == 0) {
                        //默认第一个菜单被选中
                        result += '<div class="swiper-slide"><a href="' + dd[i].NavigateUrl + '" style="color:#ed4242;" >'
                    }
                    else if (ID == dd[i].ID) {
                        result += '<div class="swiper-slide"><a href="' + dd[i].NavigateUrl + '" style="color:#ed4242;" >'
                    }
                    else {
                        result += '<div class="swiper-slide"><a href="' + dd[i].NavigateUrl + '">'
                    }

                    result += dd[i].Name + '</a></div>';
                }
                result += '<div class="swiper-slide"></div>';
                $(".swiper-wrapper").html(result);

                //导航滑动效果
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 4,
                    paginationClickable: true,
                    spaceBetween: 0,
                    freeMode: true
                });
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            }
        });

        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;

        var _menu_id = (getUrlParam('ID') == null) ? "" : getUrlParam('ID');
        var _module = (getUrlParam('module') == null) ? "" : getUrlParam('module');
        var _category = (getUrlParam('category') == null) ? "" : getUrlParam('category');
        var _searchKey = "";
        var _banchId = (getUrlParam('banchId') == null) ? "" : getUrlParam('banchId');

        // dropload
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate: '<div class="dropload-update">↑释放更新</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData: '<div class="dropload-noData">暂无数据</div>'
            },
            loadUpFn: function (me) {
                // 重置页数
                page = 0;

                $.ajax({
                    url: 'http://shtdj.shanhaitian.gov.cn/AppInterface/api/Article/GetArticle',
                    contentType: 'application/json',
                    type: 'POST',
                    async: true,    //或false,是否异步
                    data: JSON.stringify({ pageIndex: page, pageSize: size, module: _module, category: _category, searchKey: _searchKey, banchId: _banchId }),
                    dataType: 'json',
                    success: function (data, status) {

                        var dd = eval(data.result);
                        var result = '';
                        for (var i = 0; i < dd.length; i++) {

                            var img = "";
                            if (dd[i].ImageUrl == null || dd[i].ImageUrl == "") {
                                img = "image/IMG_7895.jpg";//默认图片
                            }
                            else {
                                img = dd[i].ImageUrl;
                            }

                            result += '<li class="aui-list-item">' +
                                    '<a href="@Url.Action("Content")?MenuId=' + _menu_id + '&module=' + _module + '&ID=' + dd[i].ID + '">' +
                                     '<div class="aui-media-list-item-inner">' +
                                       '<div class="aui-list-item-media"> <img data-original="http://shtdj.shanhaitian.gov.cn/' + img + '" class="lazy" /> </div>' +
                                       '<div class="aui-list-item-inner">' +
                                       '<div class="aui-list-item-text">' +
                                       '<div class="aui-list-item-title">' + dd[i].Title + '</div>' +
                                        '</div>' +
                                        '<div class="aui-list-item-text">' + dd[i].CreateTime.replace("T", " ") + '</div>' +
                                        '</div>' +
                                        '</div>' +
                                        '</a>' +
                                        '</li>';

                        }

                        $('.lists ul').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 1;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);

                        //延迟加载（懒加载）图片
                        $("img.lazy").lazyload({
                            effect: "fadeIn"
                        });
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    }
                });
            },
            loadDownFn: function (me) {

                $.ajax({
                    url: 'http://shtdj.shanhaitian.gov.cn/AppInterface/api/Article/GetArticle',
                    contentType: 'application/json',
                    type: 'POST',
                    async: true,    //或false,是否异步
                    data: JSON.stringify({ pageIndex: page, pageSize: size, module: _module, category: _category, searchKey: _searchKey, banchId: _banchId }),
                    dataType: 'json',
                    success: function (data, status) {
                        page++;
                        // 拼接HTML
                        var dd = eval(data.result);
                        var result = '';
                        var arrLen = dd.length;
                        if (arrLen > 0) {
                            for (var i = 0; i < arrLen; i++) {

                                var img = "";
                                if (dd[i].ImageUrl == null || dd[i].ImageUrl == "") {
                                    img = "image/IMG_7895.jpg";//默认图片
                                }
                                else {
                                    img = dd[i].ImageUrl;
                                }

                                result += '<li class="aui-list-item">' +
                                    '<a href="@Url.Action("Content")?MenuId=' + _menu_id + '&module=' + _module + '&ID=' + dd[i].ID + '">' +
                                     '<div class="aui-media-list-item-inner">' +
                                       '<div class="aui-list-item-media"> <img data-original="http://shtdj.shanhaitian.gov.cn/' + img + '" class="lazy" /> </div>' +
                                       '<div class="aui-list-item-inner">' +
                                       '<div class="aui-list-item-text">' +
                                       '<div class="aui-list-item-title">' + dd[i].Title + '</div>' +
                                        '</div>' +
                                        '<div class="aui-list-item-text">' + dd[i].CreateTime.replace("T", " ") + '</div>' +
                                        '</div>' +
                                        '</div>' +
                                        '</a>' +
                                        '</li>';
                            }
                            // 如果没有数据
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                        // 插入数据到页面，放到最后面
                        $('.lists ul').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();

                        //延迟加载（懒加载）图片
                        $("img.lazy").lazyload({
                            effect: "fadeIn"
                        });

                    },
                    error: function (xhr, textStatus) {
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    }
                });

            },
            threshold: 50
        });

        //绑定轮播图
        $.ajax({
            url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/Article/GetPortalArticleImage",
            type: "POST",
            contentType: "application/json",
            async: true,
            data: {},
            dataType: "json",
            success: function (data, Status) {
                var dd = eval(data.result);
                var str = '';

                for (var i = 0; i < dd.length; i++) {
                    str += '<div class="aui-slide-node bg-dark"> <a href="@Url.Action("Content")?MenuId=' + _menu_id + '&module=' + _module + '&ID=' + dd[i].ID + '"> <img src="http://shtdj.shanhaitian.gov.cn/' + dd[i].ImageUrl + '" /> </a> </div>';
                }
                $(".aui-slide-wrap").html(str);

                //轮播图效果
                var slide3 = new auiSlide({
                    container: document.getElementById("aui-slide3"),
                    // "width":300,
                    "height": 240,
                    "speed": 500,
                    "autoPlay": 3000, //自动播放
                    "loop": true,
                    "pageShow": true,
                    "pageStyle": 'line',
                    'dotPosition': 'center'
                });

                //隐藏加载动画
                $("#loading").hide();
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            }
        });

        //跳转到全部导航页面
        $(".swiper-xlbtn").click(function () {
            window.location.href = '@Url.Action("Menu")';
        });
    });
</script>
